<template>
    <div style="min-width: 1500px;">
        <el-input v-model="queryCriteria.nickName" placeholder="Please input" style="width: 900px; margin-right: 25px;" clearable />
        <el-button type="danger" @click="queryByPage">查询</el-button>
    </div>
    <!-- 条件导航 -->
    <div class="user-menu">
        <div class="first-menu">
            <div class="menu-left">
                <span>分类</span>
            </div>
            <template v-for="(data, i) in classification">
                <div class="menu-right">
                    <div :class="ClassificationSubscript == i ? 'change-bg' : ''" @click="changeClassification(i)">
                        <span>{{ data }}</span>
                    </div>
                </div>
            </template>

        </div>
        <div class="division"></div>
        <div class="second-menu">
            <div class="menu-left">
                <span>排序</span>
            </div>
            <template v-for="(data, index) in collation">
                <div class="menu-right">
                    <div :class="CollationSubscript == index ? 'change-bg' : ''" @click="changeCollation(index)">
                        <span>{{ data }}</span>
                    </div>
                </div>
            </template>

        </div>
    </div>
    <div class="operation">
        <el-button type="danger" @click="deleteUser(-1)">删除选中</el-button>
    </div>

    <!-- 表格 -->
    <div style="max-width: 1600px;min-width: 1000px;margin: auto;">
        <el-row style="height: 550px;padding-top: 20px;justify-content: flex-end;">

            <el-table :data="pageList.recodes" border style="width: 100%" @selection-change="handleSelectionChange"
                @select='onTableSelect' :row-key="getRowKeys">
                <el-table-column align="center" type="selection" width="55" :reserve-selection="true" />
                <el-table-column align="center" prop="id" label="编号" width="60" />
                <el-table-column align="center" prop="nickName" label="用户名" width="180" />
                <el-table-column align="center" prop="userName" label="手机号" width="180" />
                <el-table-column align="center" label="头像" width="90" >
                    <template #default="scope">
                        <div>
                            <el-image width="40px" heigth="40px" :src="scope.row.avatar" :fit="fill"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="likes" label="被赞" width="90" />
                <el-table-column align="center" prop="fans" label="粉丝" width="90" />
                <el-table-column align="center" prop="focus" label="已收藏量" width="90" />
                <el-table-column align="center" prop="describe" label="简介" width="90" />
                <el-table-column align="center" prop="address" label="地址" width="90" />
                <el-table-column align="center" prop="email" label="邮箱" width="180" />
                <el-table-column align="center" prop="certification" label="是否官方" width="90" />
                <el-table-column align="center" prop="state" label="是否已删" width="90" />
                <el-table-column align="center" label="操作" width="210">
                    <template #default="scope">

                        <el-button size="small" type="danger" @click="ModifyInfo(scope.row)">修改</el-button>
                        <template v-if="scope.row.state==0">
                            <el-button type="danger" size="small" @click="deleteUser(scope.row.id)">删除</el-button>
                        </template>
                        <template v-if="scope.row.state==1">
                            <el-button type="success" size="small" @click="">恢复</el-button>
                        </template>
                        
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination background layout="prev, pager, next" :total="pageList.count"
                    :page-size="pageList.pageSize" :current-page="pageList.currentPage" @current-change="changepage">
                </el-pagination>
            </div>
        </el-row>

    </div>

    <!-- form表单 -->
    <el-dialog v-model="dialogFormVisible" title="修改信息">
        <el-form :model="form">
            <el-form-item label="昵称" :label-width="140">
                <el-input v-model="user.nickName" :placeholder="user.nickName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="被赞" :label-width="140">
                <el-input v-model="user.likes" :placeholder="user.likes" autocomplete="off" />
            </el-form-item>
            <el-form-item label="粉丝" :label-width="140">
                <el-input v-model="user.fans" :placeholder="user.fans" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="danger" @click.prevent="updateUser">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import user from '@/api/user/user'
export default {
    name: 'UserManage',

    data() {
        return {
            ids: [], //选中删除所需的id
            dialogFormVisible: false,
            ClassificationSubscript: 0,
            CollationSubscript: 0,
            collation: ["默认","获赞", "粉丝", "已收藏量"],
            classification: ["全部", "未删除","已删除"],
            queryCriteria: {
                title:'',
                classificationType: -1,
                collationType: 0,
                current: 1,
                sort: false
            },
            pageList: {
                count: 1,
                pageSize: 9,
                currentPage: 2,
                recodes: [
                    {
                        id: 1,
                        userName: '18269315689',
                        nickName: '星星',
                        avatar: '',
                        likes: 20,
                        fans: 10,
                        focus: 10,
                        describe: '',
                        address: '',
                        email: '',
                        state: 1,
                        certification:0
                    }
                ]

            },
            user: {
            }
        };
    },

    mounted() {
        this.queryByPage()
    },

    methods: {
        // 分类的切换
        changeCollation(index) {
            this.queryCriteria.collationType = index
            if (this.CollationSubscript == index) {
                this.queryCriteria.sort = !this.queryCriteria.sort
            } else {
                this.CollationSubscript = index
            }
            this.queryByPage();
        },
        // 排序的切换
        changeClassification(i) {
            this.queryCriteria.classificationType = i-1
            if (this.ClassificationSubscript == i) {
                this.queryCriteria.sort = !this.queryCriteria.sort
            } else {
                this.ClassificationSubscript = i
            }

            this.queryByPage();
        },
        // 弹出框（修改的）
        ModifyInfo(data) {
            this.user = data
            this.dialogFormVisible = true
        },
        // 分页查询
        queryByPage() {
            user.queryUserByPage(this.queryCriteria).then(re => {
                //如果查询当前页无内容，再次发送请求获取上一页的内容
                if(re.data.data.pages.recodes.length == 0 && this.queryCriteria.current > 1){
                    this.queryCriteria.current --;
                    this.queryByPage()
                }
                this.pageList = re.data.data.pages
            })
        },
        changepage(newPage) {
            this.queryCriteria.current = newPage
            this.queryByPage();

        },
        // 删除
        deleteUser(id) {
            if(id>=0){
                this.ids.push(id)
            }
            user.deleteMultipleUser(this.ids).then(re=>{
                //console.log(re.data.code);
                if(re.data.code == 20000){
                    this.queryByPage()
                }
            })
        },
        getRowKeys(row) {
            return row.id
        },
        handleSelectionChange(val) {
            this.ids = []
            for (let index = 0; index < val.length; index++) {
                this.ids.push(val[index].id); 
            }
        },
        updateUser(){

            this.dialogFormVisible = false;
            user.updateUserInfo(this.user).then(re=>{
                if(re.data.code == 20000){
                    this.queryByPage()
                }
            })
        }
    },
};
</script>

<style lang="css" scoped>
.user-menu {
    margin: auto;
    margin-top: 25px;
    width: 90%;
    max-width: 1400px;
    min-width: 1300px;
    height: 20%;
    background-color: #f56c6c;
}

.user-menu span {
    color: #eee;
}

.user-menu .menu-right {
    cursor: pointer;
}

.first-menu {
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.menu-left {
    margin: 0 50px;
}

.menu-right {
    margin-right: 25px;
}

.menu-right {
    text-align: center;
}

.menu-right span {
    margin: 0 15px;
}

.change-bg {
    text-align: center;
}

.change-bg {
    background-color: #fff;
    border-radius: 4px;
}

.change-bg span {
    color: #f56c6c;
}

.division {
    width: 95%;
    margin: auto;
    border-bottom: 1px dashed #fff;
}

.second-menu {
    height: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

:deep(.is-focus) {
    box-shadow: 0 0 0 1px #f56c6c;
}

.operation {
    margin: auto;
    margin-top: 25px;
    max-width: 1400px;
    min-width: 1300px;
    display: flex;
    justify-content: flex-end
}

.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

.page {
    margin-right: 100px;
}
</style>